<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%@include file="/WEB-INF/views/common/common.jsp" %>
    <title>收银管理</title>
    <style type="text/css">
        .choose:hover {
            cursor: hand
        }

        .divOver {
            color: #0b0a5e;
        }

        .src {
            color: white;
        }
    </style>
    <script type="text/javascript">

        function showTime() {
            var currentTime = new Date();
            var year = currentTime.getFullYear();
            var month = currentTime.getMonth() + 1;
            date = currentTime.getDate();
            $("#currentTime").html(year + "年" + month + "月" + date + " " + currentTime.toLocaleTimeString());
        }

        function setSn() {
            var currentTime = new Date();
            var sn = currentTime.getTime();
            $("#saleOrderSn").html(sn);
        }

        setInterval("showTime()", 1000);
        setTimeout("setSn()", 1000);

        function amount() {
            $("#realAmount").html(0);
            $("#totalAmount").html(0);
            var rows = $("#product_sale_datagrid").datagrid('getRows');
            var count = 0;
            $.each(rows, function (index1, row) {
                $(".amount").each(function (index2, node) {
                    if (index1 == index2) {
                        var amount = parseInt(row.salePrice) * parseInt(node.value);
                        count += amount;
                    }
                });
            })
            $("#totalAmount").html(count);
            var discount = parseFloat($("#discount").html() / 100);
            $("#realAmount").html((parseFloat($("#totalAmount").html()) * discount).toFixed(2));
        }

        $(function () {
            var $settlement_product_datagrid = $("#settlement_product_datagrid");
            var $settlement_commodity_datagrid = $("#settlement_commodity_datagrid");
            var $product_sale_datagrid = $("#product_sale_datagrid");
            $settlement_product_datagrid.datagrid({
                url: "/product/list.do",
                toolbar: '#select_product_toolbar',
                fitColumns: true,
                pagination: true,
                pageSize: 20,
                pageList: [20, 50, 100],
                singleSelect: true,
                columns: [[
                    {field: 'cb', checkbox: true, width: 100},
                    {field: 'id', hidden: true, width: 100},
                    {field: "name", title: "商品名", width: 100},
                    {field: "sn", title: "商品编号", width: 100},
                    {field: "integral", title: "商品积分", width: 100},
                    {field: "salePrice", title: "零售价", width: 100},
                    {field: "firstLevel", title: "商品分类", width: 100},
                    {field: "remark", title: "商品简介", width: 100}
                ]],
                onClickRow: function (index, row) {
                    var rows = $product_sale_datagrid.datagrid('getRows');
                    var sns = $.each(rows, function (index, node) {
                        return node.productSn;
                    });
                    var ret = false;
                    $.each(sns, function (index, object) {
                        if (object.sn == row.sn) {
                            //如果已被选择,获取在datagrid中存在的数量,+1
                            var input = $("#" + row.sn);
                            var num = input.val();
                            input.val(parseInt(num) + 1);
                            var totalAmount = $("#totalAmount").html();
                            $("#totalAmount").html(parseFloat(totalAmount) + parseFloat(row.salePrice));
                            ret = true;
                            return false;
                        }
                    });
                    if (!ret) {
                        $product_sale_datagrid.datagrid("appendRow", row);

                        var totalAmount = $("#totalAmount").html();
                        $("#totalAmount").html(parseFloat(totalAmount) + parseFloat(row.salePrice));

                    }
                    var discount = parseFloat($("#discount").html() / 100);
                    var totalAmount = parseFloat($("#totalAmount").html());
                    $("#realAmount").html(parseFloat(totalAmount * discount).toFixed(2));
                }
            });

            $product_sale_datagrid.datagrid({
                striped: true,
                rownumbers: true,
                singleSelect: true,
                columns: [[
                    {field: 'sn', title: '商品编码', width: 3, align: 'center'},
                    {field: 'name', title: '商品名称', width: 3, align: 'center'},
                    {field: 'salePrice', title: '零售价', width: 3, align: 'center'},
                    {field: 'integral', title: '积分', width: 3, align: 'center'},
                    {
                        field: 'number',
                        title: '数量',
                        width: 3,
                        align: 'center',
                        formatter: function (value, row, index) {
                            var sn = row.sn;
                            return '<input type="text" class="easyui-numberbox amount" id=' + sn + ' onchange="amount()" name="number" value="1" style="width:40px;" min="1" >'
                        }
                    }
                ]],
                onDblClickRow: function (rowIndex, rowData) {
                    amount();
                    $product_sale_datagrid.datagrid('deleteRow', rowIndex);
                }
            });

            $settlement_commodity_datagrid.datagrid({
                // url: '/commodity/list',
                toolbar: '#select_commodity_toolbar',
                fitColumns: true,
                striped: true,
                pagination: true,
                singleSelect: true,
                columns: [[
                    {field: 'id', title: 'ID', width: 3, align: 'center'},
                    {field: 'sn', title: '服务编码', width: 3, align: 'center'},
                    {field: 'name', title: '姓名', width: 3, align: 'center'},
                    {field: 'price', title: '价格', width: 3, align: 'center'}
                ]]
            });

            var $selectClientBig = $('#selectClientBig');
            var $saveOrderBig = $('#saveOrderBig');
            var $getOrderBig = $('#getOrderBig');
            var $payMoneyBig = $('#payMoneyBig');
            var $selectClient = $('#selectClient');
            var $saveOrder = $('#saveOrder');
            var $getOrder = $('#getOrder');
            var $spayMoney = $('#payMoney');


            $selectClientBig.hover(function () {
                $selectClient.removeClass("src");
                $selectClient.addClass("divOver");
            }, function () {
                $selectClient.removeClass("divOver");
                $selectClient.addClass("src");
            });
            $saveOrderBig.hover(function () {
                $saveOrder.removeClass("src");
                $saveOrder.addClass("divOver");
            }, function () {
                $saveOrder.removeClass("divOver");
                $saveOrder.addClass("src");
            });
            $payMoneyBig.hover(function () {
                $spayMoney.removeClass("src");
                $spayMoney.addClass("divOver");
            }, function () {
                $spayMoney.removeClass("divOver");
                $spayMoney.addClass("src");
            });
            $getOrderBig.hover(function () {
                $getOrder.removeClass("src");
                $getOrder.addClass("divOver");
            }, function () {
                $getOrder.removeClass("divOver");
                $getOrder.addClass("src");
            });

            var $select_client_datagrid = $("#select_client_datagrid");
            var $select_client_dialog = $("#select_client_dialog");
            $select_client_datagrid.datagrid({
                url: '/member/list.do',
                striped: true,
                pagination: true,
                toolbar: '#select_client_toolbar',
                singleSelect: true,
                columns: [[
                    {field: 'cardNum', title: '卡号', width: 100},
                    {field: 'name', title: '姓名', width: 100, align: 'center'},
                    {
                        field: 'sex',
                        title: '性别',
                        width: 100,
                        align: 'center',
                        formatter: function (value, row, index) {
                            return value ? '女士' : '先生';
                        }
                    },
                    {field: 'balance', title: '余额', width: 100},
                    {field: 'integral', title: '积分', width: 100},
                    {
                        field: 'group', title: '分组', width: 100, formatter: function (value, row, index) {

                            return value ? value.groupname : "";
                        }
                    }
                ]],
                onClickRow: function (rowIndex, rowData) {
                    if (rowData.group) {
                        $("#discount").html(80);
                    }
                    console.log(rowData);
                    $("#balance").html(rowData.balance);
                    $("#clientCard").prop("checked", true);
                    $("#clientNum").val(rowData.cardNum);
                    $("#clientName").val(rowData.name);
                    $select_client_dialog.dialog('close');
                    amount();
                }
            });

            $("#client_keyword").searchbox({
                searcher: function (value, name) {
                    //重新加载数据表格,带上自定义查询参数
                    $select_client_datagrid.datagrid("load", {
                        keyword: value
                    });
                }
            });
            $("#product_keyword").searchbox({
                searcher: function (value, name) {
                    //重新加载数据表格,带上自定义查询参数
                    $settlement_product_datagrid.datagrid("load", {
                        keyword: value
                    });
                }
            });
            $("#commodity_keyword").searchbox({
                searcher: function (value, name) {
                    //重新加载数据表格,带上自定义查询参数
                    $settlement_commodity_datagrid.datagrid("load", {
                        keyword: value
                    });
                }
            });

            $selectClientBig.click(function () {
                $select_client_dialog.dialog('open');
            });

            $saveOrderBig.click(function () {
                $.messager.confirm('温馨提示', '确定将此订单挂起吗？', function (r) {
                    if (r) {
                        var clientNumber = $("#clientNum").val();
                        if (clientNumber == null || clientNumber == "") {
                            $.messager.alert('温馨提示', '抱歉,仅会员享有挂单业务！', 'warning');
                            return;
                        }
                    }
                });
            });

            $payMoneyBig.click(function () {
                var realAmount = parseFloat($("#realAmount").html());
                var balance = parseFloat($("#balance").html());
                var clientName = $("#clientName").val();
                if ($("#clientCard").prop("checked")) {
                    if (realAmount > balance) {
                        var value = realAmount - balance;
                        $.messager.confirm('温馨提示', '会员<b style="color: red;">' + clientName + '</b>的卡' +
                            '<b style="color: red;">' + '余额不足</b>' + ',是否确认使用' + '<b style="color: red;">' + '其他方式</b>支付' + '<b style="color: red;">' + value + '</b>元 ? ', function (r) {
                            if (r) {
                                var row = $select_client_datagrid.datagrid("getSelected")
                                var allM = $("#totalAmount").html();
                                $.get("/collect/updateCollect.do?id=" + row.id + "&allM=" + allM, function (data) {
                                    $.messager.confirm("温馨提示", "支付成功,亲,您的卡内余额不足,是否要现在进行充值!", function (r) {
                                        if (r) {
                                            window.location.href = "/recharge.do";
                                        } else {
                                            window.location.reload;
                                        }
                                    })
                                })
                                return;
                            }
                        })
                    } else {
                        $.messager.confirm('温馨提示', '是否确认会员<b style="color: red;">' + clientName + '</b>会员卡支付' +
                            '<b style="color: red;">' + realAmount + '</b>元 ? ', function (r) {
                            if (r) {
                                var allM = $("#totalAmount").html();
                                var ba = $("#balance").html();
                                var row = $select_client_datagrid.datagrid("getSelected")
                                $.get("/collect/updateCollect.do?id=" + row.id + "&allM=" + allM, function (data) {
                                    $.messager.confirm("温馨提示", "付款成功", function (r) {
                                        window.location.reload();
                                        return;
                                    })
                                })
                                return;
                            }
                        })
                    }
                } else if ($("#cash").prop("checked") && clientName != null && clientName != "") {
                    $.messager.confirm('温馨提示', '是否确认会员<b style="color: red;">' + clientName + '&nbsp;现金</b>支付' +
                        '<b style="color: red;">' + realAmount + '</b>元 ? ', function (r) {
                        if (r) {
                            $.messager.confirm("温馨提示", "付款成功", function (r) {
                                window.location.reload();
                                return;
                            })
                        }
                    })
                } else if ($("#cash").prop("checked") && (clientName == null || clientName == "")) {
                    $.messager.confirm('温馨提示', '是否确认<b style="color: red;">现金</b>支付' +
                        '<b style="color: red;">' + realAmount + '</b>元 ? ', function (r) {
                        if (r) {
                            $.messager.confirm("温馨提示", "付款成功", function (r) {
                                window.location.reload();
                                return;
                            })
                        }
                    })
                } else if ($("#wechat").prop("checked") && clientName != null && clientName != "") {
                    $.messager.confirm('温馨提示', '是否确认会员<b style="color: red;">' + clientName + '&nbsp;微信</b>支付' +
                        '<b style="color: red;">' + realAmount + '</b>元 ? ', function (r) {
                        if (r) {
                            $.messager.confirm("温馨提示", "付款成功", function (r) {
                                window.location.reload();
                                return;
                            })
                        }
                    })
                } else if ($("#wechat").prop("checked") && (clientName == null || clientName == "")) {
                    $.messager.confirm('温馨提示', '是否确认<b style="color: red;">微信</b>支付' +
                        '<b style="color: red;">' + realAmount + '</b>元 ? ', function (r) {
                        if (r) {
                            $.messager.confirm("温馨提示", "付款成功", function (r) {
                                window.location.reload();
                                return;
                            })
                        }
                    })
                } else if ($("#antpay").prop("checked") && clientName != null && clientName != "") {
                    $.messager.confirm('温馨提示', '是否确认会员<b style="color: red;">' + clientName + '&nbsp;支付宝</b>支付' +
                        '<b style="color: red;">' + realAmount + '</b>元 ? ', function (r) {
                        if (r) {
                            $.messager.confirm("温馨提示", "付款成功", function (r) {
                                window.location.reload();
                                return;
                            })
                        }
                    })
                } else if ($("#antpay").prop("checked") && (clientName == null || clientName == "")) {
                    $.messager.confirm('温馨提示', '是否确认<b style="color: red;">支付宝</b>支付' +
                        '<b style="color: red;">' + realAmount + '</b>元 ? ', function (r) {
                        if (r) {
                            $.messager.confirm("温馨提示", "付款成功", function (r) {
                                window.location.reload();
                                return;
                            })
                        }
                    })
                }
            });

            $getOrderBig.click(function () {
                $("#select_bill_dialog").dialog('open');
            });

            $('#getOrder_datagrid').datagrid({
                // url: '/cashierBill/hangList?status=0',
                toolbar: '#select_product_toolbar',
                fitColumns: true,
                pagination: true,
                pageSize: 5,
                pageList: [5, 10, 20],
                singleSelect: true,
                columns: [[
                    {field: 'sn', title: '订单编码', width: 1, align: 'center'},
                    {field: 'totalNumber', title: '商品总数', width: 1, align: 'center'},
                    {field: 'totalAmount', title: '总价格', width: 1, align: 'center'},
                    {field: 'inputTime', title: '录入时间', width: 1, align: 'center'},
                    {
                        field: 'number',
                        title: '会员卡号',
                        width: 1,
                        align: 'center',
                        formatter: function (value, row, index) {
                            return row.client.number
                        }
                    },
                    {
                        field: 'name',
                        title: '会员姓名',
                        width: 1,
                        align: 'center',
                        formatter: function (value, row, index) {
                            return row.client.name
                        }
                    }
                ]]
            });

            $("#getOrderItem_datagrid").datagrid();


        });

        function settlement(url) {
            var $product_sale_datagrid = $("#product_sale_datagrid");
            var rows = $product_sale_datagrid.datagrid('getRows');
            var discount = parseFloat($("#discount").html() / 100);
            $.each(rows, function (index1, row) {
                $(".amount").each(function (index2, node) {
                    if (index1 == index2) {
                        row["number"] = parseInt(node.value);
                        row["discount"] = discount;
                    }
                })
            })

            var sn = $("#saleOrderSn").html();
            var realAmount = $("#realAmount").html();
            var clientNumber = $("#clientNum").val();
            $.ajax({
                type: "post",
                url: url,
                data: {
                    'dataJson': JSON.stringify(rows),
                    'clientNumber': clientNumber,
                    'sn': sn,
                    'realAmount': realAmount
                },
                dataType: 'json',
                success: function (data) {
                    if (!data.success) {
                        $.messager.alert('温馨提示', data.msg, 'error');
                    } else {
                        $product_sale_datagrid.datagrid('loadData', {total: 0, rows: []});
                        $("#balance").html("0.00");
                        $("#totalAmount").html("0.00");
                        $("#discount").html(100);
                        $("#realAmount").html("0.00");
                        $("#cash").prop("checked", true);
                        $.messager.alert('温馨提示', data.msg, 'info');
                    }
                }
            });
        }

        //分类格式化
        //其中value是指productSrot对象，而row是指当前这一行对象
        function productSrota(value, row, index) {
            if (value) {
                return value.name;
            }
            return "";
        }

    </script>


</head>
<body>
<div id="settlement_layout" class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west'" style="width:400px;">

        <div id="product_sale_layout" class="easyui-layout" data-options="fit:true,border:0">
            <div data-options="region:'north'" style="height:110px;">
                <div style="margin-left:25px;margin-top: 10px; font-size: 17px">
                    销售时间 : <span id="currentTime"></span>
                </div>

                <div style="margin-left:25px;margin-top: 10px; font-size: 17px">
                    销售单号 : <span id="saleOrderSn"></span>
                </div>
                <div style="margin-left:25px;margin-top: 10px; font-size: 17px">
                    支付方式 :
                    <input id="cash" type="radio" name="paytype" value="1" checked>现金
                    <input id="clientCard" type="radio" name="paytype" value="2" disabled>会员卡
                    <input id="wechat" type="radio" name="paytype" value="3">微信
                    <input id="antpay" type="radio" name="paytype" value="4">支付宝
                </div>
            </div>

            <div data-options="region:'center'">
                <table id="product_sale_datagrid"></table>
            </div>

            <div data-options="region:'south'" style="height: 165px;">
                <table border="0" cellspacing="0" cellpadding="0" width="98%"
                       style="margin-top: 6px;table-layout: fixed;">
                    <input type="hidden" id="clientNum" name="number">
                    <input type="hidden" id="clientName" name="name">
                    <tr>
                        <td align="left">&emsp;会员</td>
                        <td></td>
                        <td></td>
                        <td align="right">
                            <div>
                                <b name="balance"><font color="#808080">￥</font><font id="balance"
                                                                                      color="#808080">0.00</font>&emsp;</b>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" height="6px"></td>
                    </tr>
                    <tr>
                        <td align="left">&emsp;合计</td>
                        <td></td>
                        <td></td>
                        <td align="right"><b>￥</b><b id="totalAmount" name="totalAmount">0.00</b>&emsp;</td>
                    </tr>
                    <tr>
                        <td colspan="4" height="6px"></td>
                    </tr>
                    <tr>
                        <td align="left">&emsp;折扣</td>
                        <td></td>
                        <td></td>
                        <td align="right"><b id="discount" name="discount">100</b><b>%</b>&emsp;</td>
                    </tr>
                    <tr>
                        <td colspan="4" height="6px"></td>
                    </tr>
                    <tr>
                        <td align="left"><b><font style="color: red;">&emsp;应收</font></b></td>
                        <td></td>
                        <td></td>
                        <td align="right"><b><font style="color: red">￥</font><font id="realAmount" style="color: red">0.00</font>&emsp;</b>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" height="6px"></td>
                    </tr>
                    <tr>
                        <td colspan="4" height="6px"></td>
                    </tr>
                    <tr>
                        <td align="center">
                            <div id="selectClientBig" class="choose"
                                 style="margin-left:85px;background-color: #ef3f52;height: 30px;width: 99%"><b
                                    id="selectClient" class="src">选&nbsp;择&nbsp;会&nbsp;员</b>
                            </div>
                        </td>
                        <%--<td align="center">
                            <div id="saveOrderBig" class="choose"
                                 style="background-color: #ef3f52;height: 30px;width: 99%"><b id="saveOrder" class="src">挂&emsp;&emsp;单 </b>
                            </div>
                        </td>
                        <td align="center">
                            <div id="getOrderBig" class="choose"
                                 style="background-color: #ef3f52;height: 30px;width: 99%"><b id="getOrder" class="src">取&emsp;&emsp;单 </b>
                            </div>
                        </td>--%>
                        <td align="center">
                            <div id="payMoneyBig" class="choose"
                                 style="margin-left:105px;background-color: #ef3f52;height: 30px;width: 99%"><b
                                    id="payMoney" class="src">结&emsp;&emsp;算</b>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" height="6px"></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <div data-options="region:'center'">
        <div id="settlement_tabs" class="easyui-tabs" data-options="fit:true,border:0">
            <div title="商品列表">
                <table id="settlement_product_datagrid"></table>
            </div>
            <div title="服务列表">
                <table id="settlement_commodity_datagrid"></table>
            </div>
        </div>
    </div>
    <div id="select_product_toolbar">
        <input id="product_keyword" name="keyword" class="easyui-searchbox" data-options="prompt:'输入商品编号/商品名称'"/>
    </div>
    <div id="select_client_toolbar">
        <input id="client_keyword" name="keyword" class="easyui-searchbox" data-options="prompt:'输入会员卡号/手机号'"/>
    </div>
    <div id="select_commodity_toolbar">
        <input id="commodity_keyword" name="keyword" class="easyui-searchbox" data-options="prompt:'输入服务编号/名称'"/>
    </div>
</div>

<div id="select_client_dialog" class="easyui-dialog" title="会员列表" style="width:730px;height:350px;"
     data-options="iconCls:'icon-edit',modal:true,closed:true">
    <table id="select_client_datagrid" align="center"></table>
</div>

<div id="select_bill_dialog" class="easyui-dialog" title="挂单列表" style="width:1300px;height:500px;"
     data-options="iconCls:'icon-edit',modal:true,closed:true">

    <div id="select_bill_layout" class="easyui-layout" style="width:1280px;height:460px;">
        <div data-options="region:'west'" style="width:640px;">
            <table id="getOrder_datagrid"></table>
        </div>
        <div data-options="region:'center'">
            <table id="getOrderItem_datagrid"></table>
        </div>
    </div>

</div>
</body>
</html>
